<template>
  <div id="poverty">
    <router-view/>
    <div id="main">
      <div>
          <span style="border:3px solid rgb(88, 221, 254);float:left;height:30px;background-color:rgb(88, 221, 254)"></span>
          <el-breadcrumb
          separator-class="el-icon-arrow-right"
          style="margin:15px 20px"
        >
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/volunteer' }"
            >志愿者招聘</el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div>
          <el-button type="primary" style="margin-right: 20px" @click="showForm"
            >志愿者招聘
          </el-button>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          :clearable="true"
          style="width: 260px"
        >
          <el-button
            type="success"
            slot="append"
            icon="el-icon-search"
            size="mini"
            >搜索</el-button
          >
        </el-input>
      </div>
    </div>
    <div id="body">
      <ul>
        <li v-for="item in volunteer" :key="item.id">
          <img :src="item.picture" @click="onPovertySon(item.lead)" />
          <span @click="onPovertySon(item.lead)">{{ item.lead }} </span>
        </li>
      </ul>
    </div>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="total"
        @current-change="change"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>


export default {
  name:'volunteermain',
  data() {
    return {
      pageSize: 5,
      pageNum: 1,
      total: null,
      volunteer: {},
      input: "a",
    };
  },
  methods: {
    async volunteerList(pageSize, pageNum) {
      let { data: res } = await this.$axios.get("/volunteer/getlist", {
        params: {
          pageSize,
          pageNum,
        },
      });
      // console.log(res.data.list[0]);
      this.volunteer = res.data.list;
      this.total = res.data.total;
    },
    onPovertySon(e) {
      this.$emit('showSon','showSon',e);
    },
    change(e) {
      this.pageNum = e;
      this.volunteerList(this.pageSize, this.pageNum);
    },
    showForm(){
      this.$emit('Form','showForm')
    }
  },
  created() {
    this.volunteerList(this.pageSize, this.pageNum);
  },
}
</script>

<style lang="scss" scoped>
#poverty {
  border: none;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
#main {
  margin: 70px auto !important;
  width: 95%;
  display: flex;
  justify-content: space-between;
}
#body {
  ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    li {
      border: 3px solid;
      border-radius: 8px;
      border-color: rgb(212, 218, 223);
      width: 420px;
      height: 140px;
      display: flex;
      justify-content: space-between;
      margin: 10px auto;
      box-shadow: 5px 5px 5px #888888;
      img {
        margin-left: 20px;
        width: 120px;
        height: 120px;
        padding: 10px;
      }
      span {
        margin-right: 30px;
        line-height: 30px;
      }
    }
  }
}
</style>